let path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const miniCss = require('mini-css-extract-plugin')
let OptimizeCss = require('optimize-css-assets-webpack-plugin');
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const dev = 'development'

module.exports = {
    mode: dev, // 模式： 默认两种 development production
    devServer: {
        port: 3000,
        progress: true,
        contentBase: './dist',
        compress: true // 压缩
    },
    optimization:{ // 优化项
        minimizer:[
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true 
            }),
            new OptimizeCss() // 压缩css。这个包已经不再维护。注意，optimize-css-assets-webpack-plugin 主要用于生产环境中压缩 CSS 文件，因此它只会在 production 模式下生效。
            // Webpack 5，推荐使用 css-minimizer-webpack-plugin 来代替它进行 CSS 的压缩和优化
        ]
  },
    entry: './src/index.js',
    output: {
        filename: 'bundle.[hash:8].js',// 打包后的文件 名称hash 8位
        path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
    },
    plugins: [ // 说有插件
        new HTMLWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            // minify: {
            //     removeAttributeQuotes: true, // 去掉双引号 
            //     collapseWhitespace: true, // 一行展示
            // },
            // hash: true // html中js 引入添加hash
        }),
        new miniCss({
            filename: 'main.css'
        })
    ],
    module: { // 模块
        rules: [
            { // css-loader 解析@import这种语法
                // style-loader 把css插入到head中
                // loader 特点：希望功能但愿，字符串格式就是一个loader,多个loader需要用数组,loader的顺序，从右向左写
                // test: /\.css/, use: ['style-loader','css-loader'],
                test: /\.css/, 
                use: [
                    // {
                    //     loader: 'style-loader',
                    //     options: {
                    //         insertAt: 'top'
                    //     }
                    // },
                    miniCss.loader,
                    'css-loader',
                    'postcss-loader'
                ],
            },
            { // css-loader 解析@import这种语法
                // style-loader 把css插入到head中
                // loader 特点：希望功能但愿，字符串格式就是一个loader,多个loader需要用数组,loader的顺序，从右向左写
                // test: /\.css/, use: ['style-loader','css-loader'],
                test: /\.less/, 
                use: [
                    // {
                    //     loader: 'style-loader',
                    //     options: {
                    //         insertAt: 'top'
                    //     }
                    // },
                    miniCss.loader,
                    'css-loader',
                    // {
                    //     loader: 'postcss-loader',  // 使用 postcss-loader 处理 CSS
                    //     options: {
                    //         postcssOptions: {
                    //             plugins: [
                    //                 require('autoprefixer')(),  // 使用 autoprefixer 插件
                    //             ],
                    //         },
                    //     },
                    // },
                    'postcss-loader',
                    'less-loader',
                ],
            }
        ]

    }
    
}